// @flow

import * as React from 'react';
import { action } from '@storybook/addon-actions';
import paperDecorator from '../../PaperDecorator';
import InAppTutorialStepDisplayer from '../../../InAppTutorial/InAppTutorialStepDisplayer';

export default {
  title: 'In-app tutorial/InAppTutorialStepDisplayer',
  component: InAppTutorialStepDisplayer,
  decorators: [paperDecorator],
};

export const WrongEditorInfo = () => {
  return (
    <>
      <div id="step-text">Test text</div>
      <InAppTutorialStepDisplayer
        progress={28}
        step={{ elementToHighlightId: '#step-text' }}
        expectedEditor={{ editor: 'Scene' }}
        goToFallbackStep={() => {}}
        endTutorial={() => action('end tutorial')()}
        goToNextStep={() => action('go to next step')()}
      />
    </>
  );
};

export const WrongEditorInfoWithSceneName = () => {
  return (
    <>
      <div id="step-text">Test text</div>
      <InAppTutorialStepDisplayer
        progress={28}
        step={{ elementToHighlightId: '#step-text' }}
        expectedEditor={{ editor: 'Scene', scene: 'Homescreen' }}
        goToFallbackStep={() => {}}
        endTutorial={() => action('end tutorial')()}
        goToNextStep={() => action('go to next step')()}
      />
    </>
  );
};

export const StandaloneTooltip = () => {
  return (
    <>
      <div id="step-text">Test text</div>
      <InAppTutorialStepDisplayer
        step={{
          tooltip: {
            standalone: true,
            description:
              'This is a standalone tooltip description with an image (data url)',
            image: {
              dataUrl:
                '',
              width: '50%',
            },
          },
        }}
        progress={28}
        expectedEditor={null}
        goToFallbackStep={() => {}}
        endTutorial={() => action('end tutorial')()}
        goToNextStep={() => action('go to next step')()}
      />
    </>
  );
};
